<template>
  <view class="container">
    <!-- 导航栏 -->
    <sc-navbar back title="骨板组模板管理"></sc-navbar>

    <!-- 搜索区域 -->
    <glo-gutter>
      <glo-search placeholder="请输入模板名称/编码等关键字搜索   " show-scan @clear="handlerSearch" @filter="showFilterPopup = true"
        @scan="handlerScan" @search="handlerSearch"></glo-search>

      <!-- 骨板组模板列表 -->
      <glo-chunk v-for="item in data.list" :key="item.id" @click="handleDetail(item)">
        <sc-flex ai="center" jc="between">
          <glo-title :title="item.bonePlateGroupName"></glo-title>
          <sc-icon name="arrow-right" color="primary" size="20"></sc-icon>
        </sc-flex>
        <sc-flex ai="center" col-gap="19" mt="15" width="100%">
          <sc-image :src="item.bonePlateImageAddress" height="112" width="112"></sc-image>
          <glo-info :info="getInfo(item)"></glo-info>
        </sc-flex>
      </glo-chunk>
    </glo-gutter>
  </view>
</template>
<script setup>
const showFilterPopup = ref(false);
const data = reactive({
  list: [],
  total: 0,
  params: {
    pageNo: 1,
    pageSize: 10,
  },
});

/**
 * 获取数据项的信息
 * @param {Object} item 数据项
 * @returns {Array} 信息数组
 */
const getInfo = (item) => {
  return [
    {
      type: "single",
      label: "模板编码",
      value: item.bonePlateGroupTemplateCode || "-",
    },
    {
      type: "single",
      label: "商品大类",
      value: item.productCategory || "-",
    },
    {
      type: "multiple",
      columns: "1fr 1fr",
      list: [
        {
          type: "single",
          label: "所含数量",
          value: item.containCount || "-",
        },
        {
          type: "single",
          label: "剩余数量",
          value: item.remainingCount || "-",
        },
      ],
    },
    {
      type: "single",
      label: "生产厂家",
      value: item.manufacturerName || "-",
    },
  ];
};

/**
 * 获取列表数据
 */
const getList = async (config = {}) => {
  data.params = { ...data.params, ...config };
  const res = await _api.getGuBanZuList(data.params);
  if (res) {
    data.list = res.list || [];
    data.total = res.total || 0;
  }
};

/**
 * 跳转到详情页
 * @param {Object} item 数据项
 */
const handleDetail = (item) => {
  uni.navigateTo({
    url: `/subGuBanZuMuBan/pages/detail?id=${item.id}`,
  });
};

/**
 * 搜索功能
 * @param {String} keyword 搜索关键词
 */
const handlerSearch = (keyword) => {
  data.params.commonSerchName = keyword;
  getList();
};

/**
 * 扫描功能
 */
const handlerScan = () => {
  console.log("🚀 handlerScan: ");
};

onMounted(() => {
  getList();
});
</script>
<style lang="scss">
page {
  background: $color-bg;
}
</style>
